{% include "header.tpl" %}
<script type="text/javascript">
	window.onload = function() {
		var base = new dhtmlXLayoutObject('container', '3L', 'dhx_skyblue');
        base.cont.obj._offsetTop = 60;
        base.cont.obj._offsetLeft = 30;
		base.cells("b").setWidth(500);

		var text = base.cells("a").setText("Tickets");
		var text = base.cells("b").setText("New");
		var text = base.cells("c").setText("Values");

		var toolbar = base.attachToolbar();
		toolbar.setIconsPath("images/");
		toolbar.setIconSize(48);

		// adding a home link for default
		toolbar.addButton('home', 'Home', 'Home');
		toolbar.setItemImage('home', 'Home.png');
		toolbar.setItemToolTip('home', 'Home');
		toolbar.attachEvent("onClick", function(id) {
			menuButtons(id);
		});
		// build the menus dynamically from ajax call to controller
		$.getJSON('core/getMenu', function(data) {
			$.each(data, function(key, value) {
				buildToolbar(value, toolbar);
			})
		})
		// status bar
		var statusBar = base.attachStatusBar();
		statusBar.setText("Simple Status Bar");

		// connect html id to element
		base.cells("a").attachObject("grid");

		// setup grid
		ticketsGrid = base.cells("a").attachGrid();
		ticketsGrid.setHeader('ID, Pri, Owner, Title');
		ticketsGrid.setInitWidths('25, 25, 75, *');
		ticketsGrid.setColSorting('int, str, str, str');
		ticketsGrid.setImagePath('css/imgs/');
		ticketsGrid.init();
		//ticketsGrid.loadXML('xml/tickets.xml');
	}
</script>
</head>
<body>
    <div id="header">
        <span id='header_text'>Encompass</span>
        <br />
        <span id='tagline'>Project Management</span>
    </div>
    <div id="container">
        <div id='grid'></div>
    </div>
    <div id="footer"></div>
</body>
</html> 
